<template>
  

  <div>
      <div> 显示自己的计算属性: {{totalCount}}</div>
    <hr>
   <h1>  通过辅助函数 方式一 访问 count:  {{count}}  ----{{msg}}</h1>

   <hr>

   <button  @click="mapChangeCount"> 点击 改变 count   </button>


<hr>

<button @click="aysncMapChangeCount"> 点击 异步 mapActions  改变 count</button>


<hr>
<h1>  mapGetters 辅助函数获取 getters的值,: {{sumArr}}  ---{{filterArr}}  </h1>
  </div>
</template>

<script>

// import  {mapState} from 'vuex'
// import {mapMutations} from 'vuex'

import    {mapState,mapMutations,mapActions,mapGetters}  from  'vuex'

// console.log( mapState(['a'])); //{a:f}

// console.log( mapState(['count']));

export default {



     computed:{
         ...mapState(['count','msg']),
         ...mapGetters(['sumArr','filterArr']),
        //  count() {
        //      return  this.$store.state.count
        //  },
         totalCount() {
             return '我是总和'
         }
     },
     methods:{
         ...mapMutations(['addCount','subCount']),
         ...mapActions(['asyncAddCount','asyncSubCount']),

         
         mapChangeCount() {
            //  alert('map')
            // this.$store.commit('addCount')
            // this.addCount()
            this.subCount()
         },

         //异步改变
         aysncMapChangeCount() {
            //  this.asyncAddCount()
            this.asyncSubCount()
         }

     }

}
</script>

<style>

</style>